<!--
功能：按钮权限
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-15 09:08:56
-->
<template>
  <div>
    <!-- 页面标题 -->
    <PageTitle
      title="按钮权限"
      subTitle="根据不同角色返回不同的按钮标识，前端使用自定义指令渲染"
    ></PageTitle>
    <div class="page-content">
      <a-alert
        message="不用用户角色拥有不同的按钮权限，请切换账号查看"
        description="Admin角色，账号：admin，密码：123456，Test角色，账号：test，密码123456"
        type="info"
      />
      <div style="margin-top: 15px">用户拥有的按钮权限数据 {{ buttonPermission }}</div>
      <div style="margin-top: 15px">
        <a-button type="primary" v-permission="['user:query']" style="margin-right: 8px"
          >查询用户</a-button
        >
        <a-button v-permission="['user:add']" style="margin-right: 8px">新增用户</a-button>
        <a-button v-permission="['user:update']" style="margin-right: 8px">编辑用户</a-button>
        <a-button v-permission="['user:delete']" style="margin-right: 8px">删除用户</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const buttonPermission = ref(userStore.permissions)
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
}
</style>
